<script setup lang="ts">
import { onMounted, ref } from "vue";
import { earthChartData } from "./earthData";
import "echarts-gl";
import * as echarts from "echarts";
defineOptions({
  name: "Earth"
});

const chartRef = ref(null);

onMounted(() => {
  if (chartRef.value) {
    const myChart = echarts.init(chartRef.value);
    myChart.setOption(earthChartData);
  }
});
</script>

<template>
  <div class="middle-box">
    <!-- <ReChart :data="earthChartData" style="width: 100%; height: 100%" /> -->
    <div ref="chartRef" style="width: 100%; height: 100%" />
  </div>
</template>

<style lang="scss" scoped>
.middle-box {
  width: 100%;
  height: 100%;
}
</style>
